<!DOCTYPE html>
<html>
<head>
  <title>map</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <style type="text/css">
    html, body, #map {
      border: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-size: 13px;
      color: #0090fa;
    }
    .tools {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 99;
    }
  </style>
  <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
  const center = [12697478.319803001, 2575790.2029516073]
  const zoom = 4
  var view = new ol.View({
    center: center,
    zoom: zoom,
    maxZoom: 22
  })
  const source = new ol.source.XYZ({
    url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
  })
  const untiled = new ol.layer.Image({
    source: new ol.source.ImageWMS({
      ratio: 1,
      url: 'https://lzugis.cn/geoserver/lzugis/wms',
      params: {
        LAYERS: 'lzugis%3Aprovince',
      }
    })
  });
  const feature = new ol.Feature({
    geometry: ol.geom.Polygon.fromExtent([7960094.725697456, 851859.8328115568, 15562215.810827946, 8219166.367049985])
  })
  const feature1 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([120, 37.5]))
  })
  var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [feature, feature1]
    })
  });
  var map = new ol.Map({
    target: 'map',
    attributes: [],
    layers: [
      new ol.layer.Tile({
        source
      }),
      // new ol.layer.Tile({
      //   source: new ol.source.TileDebug({
      //     projection: 'EPSG:3857',
      //     tileGrid: source.getTileGrid()
      //   })
      // }),
      // untiled,
      vector
    ],
    view: view
  });
  // var graticuleLayer = new ol.Graticule({
  //   // map: map,
  //   strokeStyle: new ol.style.Stroke({
  //     color: 'rgb(3,133,255)',
  //     width: 1
  //   }),
  //   targetSize: 100
  // });
  var graticuleLayer = new ol.Graticule({
    showLabels: true,
    lonLabelStyle: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      textBaseline: 'bottom',
      stroke: new ol.style.Stroke({
        color: 'rgb(3,133,255)',
        width: 1
      })
    }),
    latLabelStyle: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      textBaseline: 'bottom',
      stroke: new ol.style.Stroke({
        color: 'rgb(3,133,255)',
        width: 1
      })
    })
  });
  graticuleLayer.setMap(map);
</script>
</body>